<template>
	<view style="padding-bottom: 30px;">
		<!-- #ifdef H5 -->
		
		<cu-custom class="bgLiner" :isBack="true" style="position: fixed;top: 0; width: 100%;z-index: 9999;">
			<block slot="content">{{pageDesign.pageName}}</block>
		</cu-custom>
		<view style="padding-top: 45px;"></view>
		<!-- #endif -->
		
		<!-- #ifdef MP-WEIXIN || APP-PLUS -->
		
		<cu-custom :bgColor="'bgLiner'"  :isBack="true">
			<block slot="content">{{pageDesign.pageName}}</block>
		</cu-custom>
		
		<!-- #endif -->
		<view class="applyFor-top">
			<view class="imgCon">
				<image class="imgStyle" :src="zmzImg" mode=""></image>
			</view>
			<text class="applyText">
				请上传清晰的正面照
			</text>
		</view>
		<u-form :model="form" ref="uForm">
			<!-- 基本信息-->
			<view class="applyFor-form-border">
				<view class="applyFor-form-con">
					<view class="applyFor-form-title">
						<text class="title-border"></text>
						<text class="">
							基本信息
						</text>
					</view>
					<u-form-item label="姓名" prop="userName" label-width="240">
						<u-input v-model="form.userName" placeholder="请输入姓名" />
					</u-form-item>
					<u-form-item :label-position="labelPosition" label="性别" prop="sex" label-width="240">
						<u-input :border="border" type="select" :select-open="selectShow" v-model="form.sex" placeholder="请选择性别" @click="selectShow = true"></u-input>
					</u-form-item>
					<u-form-item :label-position="labelPosition" label="所属公司" prop="companyPersonId" label-width="240">
						<u-input :border="border" type="select" :select-open="affiliationShoe" v-model="form.companyPersonId" placeholder="请选择所属公司" @click="affiliationShoe = true"></u-input>
					</u-form-item>
					<u-form-item v-if="corporateState" :label="form.companyPersonId + '名称'" prop="companyName" label-width="240">
						<u-input v-model="form.companyName" :placeholder="'请输入' + form.companyPersonId + '名称'" />
					</u-form-item>
					<u-form-item :label-position="labelPosition" label="请选择服务类型" prop="skillCategoryId" label-width="240">
						<u-input :border="border" type="select" :select-open="serviceTypeState" v-model="form.skillCategoryId" placeholder="请选择服务类型" @click="serviceTypeState = true"></u-input>
					</u-form-item>
					<u-form-item :label-position="labelPosition" label="请选择服务区域" prop="serviceArea" label-width="240">
						<u-input :border="border" type="select" :select-open="pickerShow" v-model="form.serviceArea" placeholder="请选择服务区域" @click="pickerShow = true"></u-input>
					</u-form-item>
				</view>
			</view>
			
				
			
			<!-- 上传证件照 -->
			<view class="applyFor-form-border">
				<view class="applyFor-form-con">
					<view class="applyFor-form-title">
						<text class="title-border"></text>
						<text class="">
							上传证件照
						</text>
					</view>
					<view class="applyFor-form-con applyFor-form-conFlex">
						<view class="applyFor-form-conLi">
							<pictures @handleUploaded="handleCustomEvent" @remoceUploaded="remoceUploadedEvent" @failUploaded="failUploadedEvent" :backgroundImage="parentBackgroundImage"></pictures>
							
							<view class="textStyle">身份证人面像</view>
							<uni-view v-if="errorData.idCardError" class="u-form-item__message">{{errorData.idCardError}}</uni-view>
						</view>
						<view class="applyFor-form-conLi">
							
							<pictures @handleUploaded2="handleCustomEvent2" @remoceUploaded2="remoceUploadedEvent2" @failUploaded2="failUploadedEvent2" :backgroundImage="parentBackgroundImageTwo"></pictures>
							
							<view class="textStyle">身份证国徽面</view>
							<uni-view v-if="errorData.idCardError2" class="u-form-item__message">{{errorData.idCardError2}}</uni-view>
						</view>
						<view class="applyFor-form-conLi">
							
							<pictures @handleUploaded3="handleCustomEvent3" @remoceUploaded3="remoceUploadedEvent3" @failUploaded3="failUploadedEvent3" :backgroundImage="parentBackgroundImagethree"></pictures>
							
							<view class="textStyle">证书</view>
							<uni-view v-if="errorData.idCardError3" class="u-form-item__message">{{errorData.idCardError3}}</uni-view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 上传证件照 -->
			<view class="applyFor-form-border">
				<view class="applyFor-form-con" style="padding-bottom: 15px;">
					<view class="applyFor-form-title" style="padding-bottom: 40.22rpx;">
						<text class="title-border"></text>
						<text class="">
							资历
						</text>
					</view>
					<view class="applyFor-zl">
						<view :class="{'applyFor-zl-con' : true}" v-for="(item,i) in qualificationsList" :key="item.id" @tap="tabCilck(i,item)">
							<view :class="{'imgCon' : true,'hover' : start === i}"><image class="imgStyle" :src="start == i ? item.urlHover : item.url" mode=""></image></view>
							<text class="textStyle">{{ item.name }}</text>
						</view>
					</view>
					<uni-view v-if="errorData.qualificationsError" class="u-form-item__message" style="margin-left: 13x;">{{errorData.qualificationsError}}</uni-view>
				</view>
			</view>
			
			<u-select mode="single-column" :list="sexSelectList" v-model="selectShow" @confirm="selectConfirm"></u-select>
			<u-select mode="single-column" :list="affiliationtList" v-model="affiliationShoe" @confirm="affiliationConfirm"></u-select>
			<u-select mode="single-column" :list="serviceList" v-model="serviceTypeState" @confirm="serviceListConfirm"></u-select>
			<u-picker mode="region" v-model="pickerShow" @confirm="regionConfirm"></u-picker>
			
			<u-popup v-model="show" mode="center" :mask-close-able="false" width="500rpx" height="537.89rpx" :closeable="true" close-icon-color="#fff" close-icon-size="45rpx" @close="handleClose">
				<view class="model-imgCon">
					<image class="imgStyle" :src="tjImg" mode=""></image>
				</view>
				<view class="text">
					<text class="textStyle1">提交成功，等待审核员审核</text>
					<text class="textStyle2">预计一个工作日之日审核完毕，审核结果会短信通知到您的手机上</text>
				</view>
			</u-popup>
			
	    </u-form>
		<view class="btn-submit" @click="submit">确认申请</view>
		<!-- <view class="btn-submit" @click="ce">确认申请222</view> -->
		
		<u-modal v-model="showStatus" :content="content" :show-cancel-button="true" @confirm="shoWconfirm" ></u-modal>
		
	</view>
</template>

<script>
	import config from 'config/env'
	import debounce from 'lodash/debounce' 
	import { getSkillCategory,getSkilAuthentication } from '@/api/skill.js'
	export default {
		data() {
			return {
				parentBackgroundImage:`${config.imgSrcL}sfzz.png`,
				parentBackgroundImageTwo:`${config.imgSrcL}sfzzj.png`,
				parentBackgroundImagethree:`${config.imgSrcL}sfzf.png`,
				pageDesign: {
					pageName: '技能认证'
				},
				categoryId:'',
				theme: getApp().globalData.theme, //主题
				fileList: [
					{
						url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg',
					}
				],
				header:{
					'Tenant-Id':'1590229800633634816',
					'hx-token': uni.getStorageSync('hx-token') ? uni.getStorageSync('hx-token') : null, // 请求token
					'timestamp': new Date().getTime(),
					//#ifdef MP-WEIXIN
					'client-type': 'WX-MA', //客户端微信小程序
					'app-id': uni.getAccountInfoSync().miniProgram.appId, //小程序appId
					//#endif
					//#ifdef APP-PLUS
					'client-type': 'APP', //客户端类型APP
					//#endif
					//#ifdef H5
					'client-type': 'H5', //客户端H5
					//#endif
					//#ifdef MP-ALIPAY
					'client-type': 'ALI-MA', //客户端支付宝小程序
					'app-id': config.aliAppId, //小程序appId
					//#endif
				},
				action:'/mallapi/file/upload',  //config.basePath +'/mallapi/file/upload   线上
				skillCategoryId:'',
				showStatus: false,
				confirmIndex: -1, // 初始化为-1，表示没有待删除的项
				uploadRef: '', // 初始化为空字符串
				content: '您确定要删除此项吗?',
				tjImg:`${config.imgSrcL}applyForBg.png`,
				zmzImg:`${config.imgSrcL}pz.png`,
				form:{
					userName : '', //名字
					// affiliation:'', //所属公司
					sex:'', //性别
					
					cardFrontUrl:'',//身份证正面url
					picBackUrl:"", //身份证反面url
					certificateUrl:"", //技能证书图片url
					
					companyName:'', //所属公司名称 companyName
					skillCategoryId:'', //服务类型 serviceRegionId
					serviceArea:'', //服务区域
					qualificationsId:'' //资历 qualificationsId
					
				},
				errorData:{  //错误提示
					idCardError:'',
					idCardError2:'',
					idCardError3:'',
					qualificationsError:''
				},
				
				qualificationsList:[  //资质
					{
						id:0,
						name:'初级工程师',
						url:`${config.imgSrcL}c.png`,
						urlHover:`${config.imgSrcL}c2.png`
					},
					{
						id:1,
						name:'中级工程师',
						url:`${config.imgSrcL}z1.png`,
						urlHover:`${config.imgSrcL}z2.png`
					},
					{
						id:2,
						name:'高级工程师',
						url:`${config.imgSrcL}g1.png`,
						urlHover:`${config.imgSrcL}g2.png`
					}
				],
				sexSelectList: [  //性别选择
					{
						value: '男',
						label: '男'
					},
					{
						value: '女',
						label: '女'
					},
					{
						value: '保密',
						label: '保密'
					}
				],
				affiliationtList:[ //所属公司选择
					{
						value: '公司',
						label: '公司'
					},
					{
						value: '店铺',
						label: '店铺'
					},
					{
						value: '个体',
						label: '个体'
					}
				],
				// {
				// 	value: '类型1',
				// 	label: '类型'
				// },
				serviceList:[],
				
				start : -1,
				
				border: false,
				actionSheetShow: false,
				
				show: false,
				selectShow: false, //性别
				affiliationShoe:false, //所属公司
				corporateState:false,//所属公司名称
				serviceTypeState:false, //服务类型
				pickerShow: false, //服务区域
				
				radioCheckWidth: 'auto',
				radioCheckWrap: false,
				labelPosition: 'left',
				codeTips: '',
				errorType: ['message'],
				
				upload1: {   //正面身份证
				  action: '', // 上传地址
				  showUploadList: false, 
				  lists: [],
				  imgbold:''
				},
				upload2: {   //反面身份证
				  action: '', // 第二个上传地址
				  showUploadList: false, 
				  lists: [],
				  imgbold:''
				},
				upload3: {   //证件
				  action: '', // 第二个上传地址
				  showUploadList: false, 
				  lists: [],
				  imgbold:''
				},
				filesArr: [],
				rules: {  //检验规则
					userName: [
						{
							required: true,
							message: '请输入姓名',
							// 可以单个或者同时写两个触发验证方式
							trigger: 'blur,change'
						}
					],
					sex: [
						{
							required: true,
							message: '请选择性别',
							trigger: 'change',
						}
					],
					affiliation : [
						{
							required: true,
							message: '请选择所属公司类型',
							trigger: 'change',
						}
					],
					companyPersonId:[
						{
							required: true,
							message: '请输入所属公司名称',
							// 可以单个或者同时写两个触发验证方式
							trigger: 'blur,change'
						}
					],
					serviceArea: [
						{
							required: true,
							message: '请选择服务区域',
							trigger: 'change',
						}
					],
					skillCategoryId:[
						{
							required: true,
							message: '请选择所属服务类型',
							trigger: 'change',
						}
					],
					intro: [
						{
							min: 5,
							message: '简介不能少于5个字',
							trigger: 'change'
						}
					]
				}
				
			};
		},
		onLoad(options) {
			
			this.pageDesign.pageName = options.name
			
			this.categoryId = options.id
			
			this.skillCategoryId = options.skillCategoryId,
			
			this.serviceList.push({
				value : options.skillCategoryId,
				label : options.name
			})
			
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
			// this.upload1.lists = this.$refs.uUpload.lists;
			// this.upload2.lists = this.$refs.uUpload2.lists;
			// this.upload3.lists = this.$refs.uUpload3.lists;
			this.getSkillCategoryList(this.categoryId)
		},
		watch:{
			'upload1.showUploadList': function(newVal) {
				if (newVal) {
				  this.form.cardFrontUrl = "";
				}
			},
			'upload2.showUploadList': function(newVal) {
				if (newVal) {
				  this.form.picBackUrl = "";
				}
			},
			'upload3.showUploadList': function(newVal) {
				  if (newVal) {
					this.form.certificateUrl = "";
				  }
			}
			
		},
		methods:{
			/**********图片上传********/
			
			async beforeUpload(index, list) {  //上传前触发的钩子回调函数
				if(list){
					this.errorData.idCardError = ''
				}
			},
			async beforeUpload2(index, list) {
				if(list){
					this.errorData.idCardError2 = ''
				}
			},
			async beforeUpload3(index, list) {
				if(list){
					this.errorData.idCardError3 = ''
				}
			},
			
			//图片上传的回调地址
			onUploaded(lists) {
				 if (lists === null || lists === undefined) {
				    console.log('lists参数为空');
				    return;
				  }
				
				  if (lists.length === 0 || lists[0].response === null || lists[0].response === undefined) {
				    console.log('lists[0].response为空');
				    return;
				  }
				const { data } = lists[0].response
				this.form.cardFrontUrl = data
				console.log(this.cardFrontUrl)
			},
			
			onUploadedtwo(lists){
				const { data } = lists[0].response
				this.form.picBackUrl = data
			},
			onUploadedthree(lists){
				const { data } = lists[0].response
				this.form.certificateUrl = data
			},
			
			
			//图片删除
			deleteItem(index,uploadRef) {
				this.showStatus = true;   // 打开确认对话框
				this.confirmIndex = index  // 设置待删除的项的索引
				this.uploadRef = uploadRef; // 设置上传组件的引用名称
				// this.$refs.uUpload.remove(index);
			},
			shoWconfirm(){
				 if (this.confirmIndex !== -1 && this.uploadRef !== '') {
					 this.$refs[this.uploadRef].remove(this.confirmIndex); // 删除指定索引的项
					 this.confirmIndex = -1; // 重置待删除的项的索引
					 this.uploadRef = ''; // 重置上传组件的引用名称 
				}
			},
			
			handleClose(){
				uni.navigateTo({
				    url: '/subpkg/skill/skillStatus/skillStatus' // 跳转到其他页面的路径
				})
			},
			tabCilck(i,item){  //选择资质
				this.start = i
				this.form.qualificationsId = item.name
				console.log(this.form.qualificationsId)
				this.errorData.qualificationsError = ''
			},
			onRemove(index, lists) {
				console.log('图片已被移除')
			},
			// 选择性别回调
			selectConfirm(e) {
				this.form.sex = '';
				e.map((val, index) => {
					this.form.sex += this.form.sex == '' ? val.label : '-' + val.label;
				})
			},
			// 选择所属公司
			affiliationConfirm(e){
				this.form.companyPersonId = '';
				e.map((val, index) => {
					this.form.companyPersonId += this.form.companyPersonId == '' ? val.label : '-' + val.label;
				})
				if(this.form.companyPersonId === '公司' || this.form.companyPersonId === '店铺'){
					this.corporateState = true
				}else{
					this.corporateState = false
				}
			},
			// 选择服务类型
			serviceListConfirm(e){
				this.form.skillCategoryId = '';
				e.map((val, index) => {
					this.form.skillCategoryId += this.form.skillCategoryId == '' ? val.label : '-' + val.label;
				})
			},
			// 选择地区回调
			regionConfirm(e) {
				this.form.serviceArea = e.province.label + '-' + e.city.label + '-' + e.area.label;
			},
			
			//文件上传成功
			handleCustomEvent(data,fileLists){
				// console.log('子组件的信息',data)
				this.upload1.imgbold = fileLists
				this.form.cardFrontUrl = data
				this.errorData.idCardError = ''
			},
			handleCustomEvent2(data,fileLists,){
				// console.log('2子组件的信息',data)
				this.upload2.imgbold = fileLists
				this.form.picBackUrl = data
				this.errorData.idCardError2 = ''
			},
			handleCustomEvent3(data,fileLists){
				// console.log('3子组件的信息',data)
				this.upload3.imgbold = fileLists
				this.form.certificateUrl = data
				this.errorData.idCardError3 = ''
			},
			
			//删除文件
			remoceUploadedEvent(data){
				this.upload1.showUploadList = data
				// console.log('子组件的信息',this.upload1.showUploadList)
				this.errorData.idCardError = '请上传身份证人面像'
				
			},
			remoceUploadedEvent2(data){
				this.upload2.showUploadList = data
				// console.log('2子组件的信息',this.upload1.showUploadList)
				this.errorData.idCardError2 = '请上传身份证国徽像'
			},
			remoceUploadedEvent3(data){
				this.upload3.showUploadList = data
				this.errorData.idCardError3 = '请上传证书'
				// console.log('3子组件的信息',this.upload1.showUploadList)
			},
			
			// 文件上传失败
			failUploadedEvent(data){
				console.log(data)
				this.errorData.idCardError = data
			},
			failUploadedEvent2(data){
				console.log(data)
		     	this.errorData.idCardError2 = data
			},
			failUploadedEvent3(data){
				console.log(data)
				this.errorData.idCardError3 = data
			},
			submit : debounce(function(){  //提交表单
			// cardFrontUrl:'',//身份证正面url
			// picBackUrl:"", //身份证反面url
			// certificateUrl:"", //技能证书图片url
			
				console.log('节流')
				this.$refs.uForm.validate(valid => {
					if(!this.form.cardFrontUrl){
						this.errorData.idCardError = '请上传身份证人面像'
						valid = false
					}
					if(!this.form.picBackUrl){
						this.errorData.idCardError2 = '请上传身份证国徽像'
						valid = false
					}
					if(!this.form.certificateUrl){
						this.errorData.idCardError3 = '请上传证书'
						valid = false
					}
					if(!this.form.qualificationsId){
						this.errorData.qualificationsError = '请选择资历'
						valid = false	
					}
					if (valid) {
						if (this.form.sex === '男') {
							this.form.sex = '1';
						} else if (this.form.sex === '女') {
							this.form.sex = '2';
						} else if (this.form.sex === '保密') {
							this.form.sex = '0';
						}
						
						this.form.skillCategoryId = this.skillCategoryId
						
						this.getAuthentication(this.form)
						
						
						this.show = true
						
						
					} else {
						console.log('验证失败');
					}
				});
			},300),
			ce(){
				console.log(this.form)
			},
			async getAuthentication(obj){
				
				const { data } = await getSkilAuthentication(obj)
				
				if(data){
					
					this.form = {}
					this.upload1.showUploadList = false
					this.upload2.showUploadList = false
					this.upload3.showUploadList = false
				}
				
				console.log(data)
				
			},
			async getSkillCategoryList (id){
				const { data } = await getSkillCategory(id)
				console.log(data)
			}
		}
	}
</script>

<style lang="scss">
.model-imgCon{
	height: 300rpx;
	.imgStyle{
		width: 100%;
		height:300rpx;
	}
}
.text{
	width: 80%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	.textStyle1{
		margin: 20px 0 10px;
		color: #000;
		font-weight: 400;
		font-size: 28rpx;
	}
	.textStyle2{
		color: #999;
		font-size: 24rpx;
		text-align: center;
		line-height: 25px;
	}
}
.u-form-item__message{
    font-size: 12px;
    line-height: 12px;
    color: #fa3534;
    margin-top: 6px;
}
.hover{
	border: 1px solid #E7CB8C !important;
}

// 图片上传
.applyFor-zl{
	display: flex;
	justify-content: space-between;
	padding-bottom:10rpx;
	.applyFor-zl-con{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.imgCon{
			    border-radius: 23rpx;
				padding: 17.58rpx 48.05rpx;
				width: 196.88rpx;
				border: 1px solid #CECECE;
			.imgStyle{
				width: 101.95rpx;
				height:96.09rpx;
			}
		}
		.textStyle{
			color: #000;
			font-size: 28rpx;
			font-weight: 400;
			margin-top: 22.27rpx;
		}
	}
}
.slot-btn {
	width: 319.69rpx;
	height: 231.21rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background: url('#{$global-url-prefix}sfzz.png') no-repeat;
	background-size: cover;
	border-radius: 10rpx;
}
.wrap {
	padding: 24rpx;
}

.slot-btn {
	width: 319.69rpx;
	height: 231.21rpx;
	background: url('#{$global-url-prefix}sfzz.png') no-repeat;
	background-size: cover;
	border-radius: 10rpx;
}
.slot-btn2{
	background: url('#{$global-url-prefix}sfzzj.png') no-repeat;
	background-size: cover;
}
.slot-btn3{
	background: url('#{$global-url-prefix}sfzf.png') no-repeat;
	background-size: cover;
}
// .slot-btn__hover {
// 	background-color: rgb(235, 236, 238);
// }

.pre-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

.pre-item {
	position: relative;
	width: 319.69rpx;
	height: 231.21rpx;
	border-radius: 10rpx;
	overflow: hidden;
	position: relative;
	margin-bottom: 20rpx;
	background-color: #ffffff;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.2);
	border: 1rpx solid #ededed;
}
.u-delete-icon{
	position: absolute;
	right: 10rpx;
	top: 10rpx;
	background-color: #fa3534;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.pre-item-image {
	width: 319.69rpx;
	height: 231.21rpx;
}

// .slot-btn__hover {
// 	background-color: rgb(235, 236, 238);
// 	}
.btn-submit{
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 30px auto 0;
	width: 490rpx;
	height: 79rpx;
	background: #000000;
	box-shadow: 0rpx 12rpx 23rpx 0rpx rgba(0,0,0,0.18);
	border-radius: 39rpx;
	color: #fff;
	border: none;
}


.applyFor-form-border{
	border-top: 7px solid #ededed;
	background-color: #fff;
}
.applyFor-form-title{
	display: flex;
	padding: 15px 0;
	color: #000;
	font-size: 28.12rpx;
	font-weight: 400;
}
.title-border::before {
    content: "";
    display:block;
    width: 4rpx;
    height: 31rpx;
    background: #D2B370;
	margin-right: 20rpx;
}
.applyFor-form-con{
	width: 95%;
	margin: 0 auto;
}
.applyFor-form-conFlex{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	.applyFor-form-conLi{
		margin-bottom: 15px;
		text-align: center;
		.textStyle{
			margin-top: 10px;
			font-size: 28rpx;
			color: #000;
		}
	}
}
.bgLiner{
	background: #fff;
	color: #000;
}
.applyFor-top{
	width: 100%;
	height: 273.75rpx;
	background: url('#{$global-url-prefix}bgabner.png') no-repeat;
	background-size: cover;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.applyText{
		color: #fff;
		margin-top: 26.95rpx;
		background: linear-gradient(0deg, #F2BB76 0%, #F0DBC3 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	.imgCon{
		width: 125rpx;
		height: 125rpx;
		background: #FFFBF2;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		.imgStyle{
			width:53.91rpx;
			height: 46.88rpx;
		}
	}
}

</style>
